import React, { useState, useEffect } from 'react';
import { Divider, Badge } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { QueryTableState, Loading } from '@/models/connect';
import ZTable from '@/components/zTable';

import {
    Form,
    Input,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
    DatePicker,
    Card,
    Progress
} from 'antd';



const BrandManage: React.FC = () => {

    const onchangeDate = (date: any, dateString: any) => {
        console.log(date, dateString);
    }
    const dataSource = [{
        id: 92222,
        sort: 1,
        logo: 222,
        brand: '品牌',
        country: '国家',
        description: '秒速',
        joinTime: '2020-02-02',
        status: 1,

    }]
    const columns = [
        {
            title: 'ID',
            key: 'id',
            dataIndex: 'id',
            ellipsis: true,
        },
        {
            title: '排序',
            key: 'sort',
            dataIndex: 'sort',
        },
        {
            title: '品牌logo',
            key: 'logo',
            dataIndex: 'logo',
        },
        {
            title: '品牌名称',
            key: 'brand',
            dataIndex: 'brand',
        },
        {
            title: '所属地区/国家',
            key: 'country',
            dataIndex: 'country',
        },
        {
            title: '描述',
            key: 'description',
            dataIndex: 'description',
        },
        {
            title: '加入时间',
            key: 'joinTime',
            dataIndex: 'joinTime',
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
        },
    ];
    return (
        <div>
            <Row  >
                <Col span={24}>
                    <Form
                        layout="inline"
                        size="middle"
                    >
                        <Form.Item label="品牌名称" >
                            <Input placeholder="input placeholder" style={{ width: '200px' }} />
                        </Form.Item>
                        <Form.Item label="添加时间" >
                            <DatePicker onChange={onchangeDate} style={{ width: '200px' }} />
                        </Form.Item>
                        <Form.Item  >
                            <Input placeholder="input placeholder" style={{ width: '200px' }} />
                        </Form.Item>
                        <Form.Item  >
                            <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                        </Form.Item>
                    </Form>
                </Col>

            </Row>

            <Card style={{ width: '100%', margin: '16px 0' }} bodyStyle={{ padding: '12px' }} >
                <Row gutter={16}>
                    <Col span={18}>
                        <Button style={{ marginRight: '16px' }} className='button-color-orange' type="primary" icon={<SearchOutlined />}>添加品牌</Button>
                        <Button style={{ marginRight: '16px' }} className='button-color-red' type="primary" icon={<SearchOutlined />}>批量删除</Button>
                        <Button style={{ marginRight: '16px' }} className='button-color-blue' type="primary" icon={<SearchOutlined />}>国内品牌</Button>
                        <Button style={{ marginRight: '16px' }} className='button-color-green' type="primary" icon={<SearchOutlined />}>查询</Button>
                    </Col>
                    <Col span={6}>
                        <Progress trailColor='red' success={{ percent: 46 }} strokeLinecap='square' showInfo={false} />
                    </Col>
                </Row>
            </Card>
            <ZTable

                columns={columns}
                dataSource={dataSource}
                rowKey="id"

            >

            </ZTable>

        </div >
    )
}

export default BrandManage;